<template>
  <div class="simpleDataBg">
    <el-row>
      <el-col v-for="(item, index) in option.column" :key="index" class="mgtb10" :span="item.span">
        <div><span>{{ item.label }} ：</span><span>{{ item | dataDicTrans(simpleData) }}</span></div>
      </el-col>
    </el-row>
    <el-row class="button-style">
      <el-button
        v-for="(item,index) in buttonSelf"
        v-show="!item.hide"
        :key="index"
        type="primary"
        @click="selfButton(item.prop)"
      >{{ item.label }}
      </el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'SimpleData',
  props: {
    simpleData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    option: {
      type: Object,
      default: function() {
        return {}
      }
    },
    buttonSelf: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  methods: {
    // 自定义按钮
    selfButton(prop) {
      this.$emit('selfButton', prop)
    }
  }
}
</script>

<style scoped>
  .simpleDataBg {
    min-height: 108px;
    font-size: 14px;
    border: 1px solid #f5f7fa;
    padding: 5px;
    background: #f5f7fa;
    border-radius: 5px;
    margin-top: 5px;
  }

  .mgtb10 {
    margin: 10px 0;
  }

  .button-style {
    text-align: center;
  }

  .button-style el-button {
    padding-right: 20px;
  }
</style>
